<template>
	<view class="lazy-load">
		<image
			:src="image" 
			:mode="mode"
			:lazy-load="load"
			@load="imageLoad(loaded)"
			@error="imageError"
			:class="loaded ? 'loadeds' : 'noLoaded'"
			:style="{width: width + 'rpx',height: height + 'rpx',transition: time  + 's' + ' opacity',borderRadius: radius + 'rpx'}"
			>
		</image>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				load:true,
				loaded:false,
				noLoaded:true
			}
		},
		mounted() {
		},
		props:{
			image:{
				type:String,
				default(){
					return ''
				}
			},
			mode:{
				type:String,
				default(){
					return "widthFix"
				}
			},
			width:{
				type:Number,
				default(){
					return 200
				}
			},
			height:{
				type:Number,
				default(){
					return 200
				}
			},
			time:{
				type:Number,
				default(){
					return .6
				}
			},
			radius:{
				type:Number,
				default(){
					return 20
				}
			},
		},
		methods:{
			// 加载成功
			imageLoad(e){
				this.loaded = true
			},
			// 加载失败
			imageError(){
				this.loaded = false
			}
		}
	}
</script>

<style scoped>
	image{
		opacity: 0;
	}
	.lazy-load{
		background: #f3f3f3 !important;
	}
	.loadeds{
		opacity: 1 !important;
	}
	.noLoaded{
		/* background: #f3f3f3 !important; */
	}
</style>
